<template>
    <div v-if="file" class="file-container">
           <span class="icon-file-message">
               <img :src="icons.file.img" :alt="icons.file.name" height="15"/>
           </span>
        {{ file.name }}
        <span class="delete-file-message" @click="cancelFile">
                <img
                  :src="icons.closeSvg.img"
                  :alt="icons.closeSvg.name"
                  height="10"
                  title="Remove the file"
                />
            </span>
    </div>
    <div class="icon-line">
        <div class="my-icon">
            <EmojiIcon :on-emoji-picked="handleEmojiPicked"/>
        </div>
        <div class="my-icon">
            <FileIcons :on-change="handleFileSubmit"/>
        </div>
    </div>
    <div class="text">
        <textarea placeholder="按 Enter 发送" v-model="content" @keyup.enter="send"></textarea>
    </div>
    <el-button class="out" type="info" plain size="small" @click="send">发送</el-button>
</template>

<script>
import {useStore} from "vuex";
import {ref, computed} from "vue";
import EmojiIcon from '../icons/EmojiIcon.vue'
import FileIcons from '../icons/FileIcon.vue'
import FileIcon from '../assets/img/file.svg'
import CloseIcon from '../assets/img/close.svg'
import {getDateTime} from "../utils/time";
import {uploadFile} from "../api/chat.js"
import {ElMessage} from "element-plus";
import{Send} from "../utils/websocket";

export default {
    props: {
        websocket: {
            type: Object,
        },
        icons: {
            type: Object,
            default: function () {
                return {
                    file: {
                        img: FileIcon,
                        name: 'default'
                    },
                    closeSvg: {
                        img: CloseIcon,
                        name: 'default'
                    }
                }
            }
        },
    },
    components: {EmojiIcon, FileIcons},
    setup(props) {
        let store = useStore();
        let sessionList = computed(() => store.state.sessions);
        let content = ref('');
        let file = ref(null);
        let type = 'TEXT';
        let send = () => {
            // let ws = props.websocket;
            //如果有文件首先发送文件
            if (file.value) {
                type = 'FILE';
                let str = {
                    url: "https://www.baidu.com/",
                    name: file.value.name
                }
                //store.commit('SEND_MESSAGE', {str, type});
                uploadFile(file.value)
                  .then((res) => {
                      if (res.code === 0) {
                          str.url = res.data
                          store.commit('SEND_MESSAGE', {str, type});
                          Send(JSON.stringify({
                              'type': 'chat',
                              'body': {
                                  mode: 'single',
                                  from: store.state.userId,
                                  to: store.state.sessionId,
                                  type: 'FILE',
                                  content: str,
                                  time: getDateTime(new Date())
                              }
                          }));
                      } else {
                          ElMessage.error('文件发送失败，请稍后重试！');
                      }
                  })
                  .catch(() => {
                      ElMessage.error('文件服务器未启动或其它错误！');
                  })
                file.value = null;
            }
            let str = content.value;
            str = str.replace(/[\r\n]/g, "");
            if (str.length) {
                type = 'TEXT'
                store.commit('SEND_MESSAGE', {str, type});
                Send(JSON.stringify({
                    'type': 'chat',
                    'body': {
                        mode: 'single',
                        from: store.state.userId,
                        to: store.state.sessionId,
                        type: 'TEXT',
                        content: str,
                        time: getDateTime(new Date())
                    }
                }));
                content.value = '';
            }
        }
        const handleEmojiPicked = (e) => {
            content.value += e;
        }
        const handleFileSubmit = (f) => {
            file.value = f;
        }
        const cancelFile = () => {
            file.value = null
        }
        return {
            file,
            send,
            content,
            handleEmojiPicked,
            handleFileSubmit,
            cancelFile,
        };
    },
};
</script>

<style scoped>
.icon-line {
    background-color: white;
    border-top: solid 1px #ddd;
    display: flex;
    align-items: center;
}

.my-icon {
    /*margin: 0 4px;*/
    margin: 8px;
}

.text {
    /*height: 100%;*/
    height: 350px;
}

textarea {
    padding: 10px;
    height: 90%;
    width: 100%;
    border: none;
    outline: none;
    font-family: "Micrsofot Yahei";
    resize: none;
}

.out {
    position: absolute;
    right: 30px;
    bottom: 15px;
}

.file-container {
    background-color: #f4f7f9;
    border-top-left-radius: 10px;
    padding: 5px 20px;
    color: #565867;
}

.delete-file-message {
    font-style: normal;
    float: right;
    cursor: pointer;
    color: #c8cad0;
}

.delete-file-message:hover {
    color: #5d5e6d;
}

.icon-file-message {
    margin-right: 5px;
}

</style>